<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f"%>
<%@ taglib uri="/WEB-INF/tld/tag.tld" prefix="my"%>
<%@ taglib uri="/WEB-INF/tld/mobai-el-common.tld" prefix="el"%>
<!DOCTYPE html>
<html>
<head>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css"
	href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/style.css" />

<title>护理项目列表</title>
<style type="text/css">
#radius {
	margin: 0 auto;
	left: -200px;
}
</style>
</head>
<body>
	<div class="page-container">
		<!-------------------------------综合查询开始---------------------------------------------------------------------------->
		<form action="/three/bnp/project" method="post" id="form1">
			<div class="text-c">
				<span class="select-box inline"> <select name="typeId"
					class="select">
						<option value="">请选择分类</option>
						<c:forEach items="${listType }" var="listType">
							<option value="${listType.typeId }">${listType.typeName }</option>
						</c:forEach>
				</select>
				</span> &nbsp;&nbsp;&nbsp;&nbsp; <span class="select-box inline"> <select
					name="status" class="select">
						<option value="">请选择状态</option>
						<option value="1">在售</option>
						<option value="2">下架</option>
				</select>
				</span> &nbsp;&nbsp;&nbsp;&nbsp; <input type="text" name="projectId"
					placeholder="请输入项目编号" style="width: 250px" class="input-text">
				&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" name="projectName"
					placeholder="请输入项目名称" style="width: 250px" class="input-text">
				<button class="btn btn-success" type="submit">
					<i class="Hui-iconfont">&#xe665;</i> 查询
				</button>
			</div>
			<!--------------------------综合查询结束---------------------------------------------------------------------------->


			<!---------------------------------添加开始--------------------------------------------------->
			<div class="cl pd-5 bg-1 bk-gray mt-20">
				<span class="l"> <a class="btn btn-primary radius"
					onClick="nurse_add()" href="javascript:;"><i
						class="Hui-iconfont">&#xe600;</i>添加护理项目</a>
				</span>
			</div>
			<!---------------------------------添加结束--------------------------------------------------->

			<!-----------------------------------显示所有开始------------------------------------------------->
			<div class="mt-20">
				<table
					class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
					<thead>
						<tr class="text-c">
							<th>项目编号</th>
							<th>项目名称</th>
							<th>分类</th>
							<th>服务时常(分钟)</th>
							<th>人民币售价(元)</th>
							<th>颜值币售价(个)</th>
							<th>标准手工费(元)</th>
							<th>活动手工费(元)</th>
							<th>状态</th>
							<th>更新时间</th>
							<th>排序号</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${selectByExample }" var="example">
							<tr class="text-c">
								<td>${example.projectId }</td>
								<td>${example.projectName }</td>
								<td><my:getTypeName typeId="${example.typeId }"></my:getTypeName></td>
								<td>${example.serverTime }</td>
								<td>${example.rmbPrice==null?"0.0":example.rmbPrice }</td>
								<td>${example.beautyPrice==null?"0":example.beautyPrice }</td>
								<td>${example.manualPrice==null?"0.0":example.manualPrice }</td>
								<td>${example.activePrice==null?"0.0":example.activePrice }</td>
								<td class="td-status">
									<c:if test="${example.status=='1'}"><span class="label label-success radius">在售</span></c:if>
									<c:if test="${example.status=='2'}"><span class="label label-danger radius">下架</span></c:if>
								</td>
								<td><f:formatDate
										value="${example.modifyTime==null?example.createTime:example.modifyTime }"
										pattern="yyyy-MM-dd" /></td>
								<td>${example.sortNo }</td>
								<td class="f-14 td-manage"><a style="text-decoration: none"
									class="ml-5"
									onClick="nurse_details('查看护理项目信息','/three/bnp/project_details?projectId=${example.projectId }')"
									href="javascript:;" title="查看详情"><i class="Hui-iconfont">&#xe665;</i></a>
									<a style="text-decoration: none" class="ml-5"
									onClick='nurse_edit(${el:toJsonString(example)})'
									href="javascript:;" title="修改"><i class="Hui-iconfont">&#xe6df;</i></a>
									<a style="text-decoration: none" class="ml-5"
									onClick="nurse_del('${example.projectId }')"
									href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a></td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</form>
		<!-----------------------------显示所有结束------------------------------------------------------->

		<!------ ----------------------添加 修改员工信息模态框开始---------------------------------------------------- -->
		<div id="modal-demo" class="modal fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content radius" id="radius" style="width: 1000px">
					<div class="modal-header">
						<h3 class="modal-title">编辑护理项目</h3>
						<a class="close" data-dismiss="modal" aria-hidden="true"
							href="javascript:void();">×</a>
					</div>
					<div class="modal-body">
						<!------ ----------------------模态框内容部分开始---------------------------------------------------- -->
						<form class="form form-horizontal" id="form2" action=""
							method="post" enctype="multipart/form-data">
							<input type="hidden" class="input-text" id="projectId"
								name="projectId" value="">
							<table>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-2 col-sm-4"><font color="red">*</font>项目名称：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" class="input-text" name="projectName">
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">状态：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<span class="select-box"> <select name="status" id="status"
													class="select">
														<option value="">请选择</option>
														<option value="1">在售</option>
														<option value="2">下架</option>
												</select>
												</span>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-2 col-sm-4">列表图片：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<span class="btn-upload form-group" id="span"> <input
													class="input-text upload-url radius" type="text"
													style="width: 185px;" name="uploadfile-1" id="1file"
													readonly> <a href="javascript:void();"
													class="btn btn-primary radius"><i class="Hui-iconfont">&#xe642;</i>
													</a> <input type="file" multiple name="files" id="file1"
													class="input-file">
												</span> <span id="span1"> <img src="" alt="请上传图片" id="coverPhoto" style="width: 100px;height: 80px"> <input
													type="hidden" name="coverPhoto" /> <a href="#"
													style="margin-top: 10px" class="btn btn-primary radius"
													id="xztp"><i class="Hui-iconfont">&#xe642;</i></a>
												</span>
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">封面图片:</label>
											<div class="formControls col-xs-6 col-sm-6">
												<span class="btn-upload form-group" id="span2"> <input
													class="input-text upload-url radius" type="text"
													style="width: 170px;" name="uploadfile-1" id="2file"
													readonly> <a href="javascript:void();"
													class="btn btn-primary radius"><i class="Hui-iconfont">&#xe642;</i></a> 
													<input type="file" multiple name="files" id="file2"
													class="input-file">
												</span> <span id="span3"> <img src="" alt="请上传图片" id="coverBigPhoto" style="width: 100px;height: 80px"> <input
													type="hidden" name="coverBigPhoto" /> <a href="#"
													style="margin-top: 10px" class="btn btn-primary radius"
													id="xztp1"><i class="Hui-iconfont">&#xe642;</i></a>
												</span>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-2 col-sm-4">分类：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<span class="select-box"> <select name="typeId"
													class="select">
														<option value="">请选择分类</option>
														<c:forEach items="${listType }" var="listType">
															<option value="${listType.typeId }">${listType.typeName }</option>
														</c:forEach>
												</select>
												</span>
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">所用设备：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" class="input-text" name="useDevice">
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-2 col-sm-4">服务时常(分钟)：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" class="input-text" name="serverTime" placeholder="请输入整数">
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">人民币售价(元)：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" class="input-text" name="rmbPrice">
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-2 col-sm-4">颜值售价(个)：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" class="input-text" name="beautyPrice" placeholder="请输入整数">
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">标准手工费(元)：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" class="input-text" name="manualPrice">
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-2 col-sm-4">活动手工费(元)：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" class="input-text" name="activePrice">
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">排序号：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" class="input-text" name="sortNo" placeholder="请输入整数">
											</div>
										</div>
									</td>
								</tr>
							</table>

							<div class="row cl">
								<label class="form-label col-xs-4 col-sm-2">内容描述：</label>
								<div class="formControls col-xs-8 col-sm-9">
									<!-- <script id="editor" type="text/plain" style="width:100%;height:400px;" name="content"></script> -->
									<textarea class="textarea radius" style="white: 100px"
										rows="10" cols="150" name="content"></textarea>
								</div>
							</div>
						</form>
						<!------ ----------------------模态框内容部分结束---------------------------------------------------- -->
					</div>
					<div class="modal-footer">
						<button class="btn btn-secondary radius" type="button" id="but">
							<i class="Hui-iconfont">&#xe632;</i> 保存
						</button>
						<button class="btn btn-default radius" data-dismiss="modal"
							aria-hidden="true" id="guanbi">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 添加 修改员工信息模态框结束--------------------------------------------------- -->
	</div>

	<script type="text/javascript"
		src="/three/lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="/three/static/formEdit.js"></script>
	<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script>
	<script type="text/javascript"
		src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
	<!--/_footer 作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript"
		src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript"
		src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/three/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/three/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/three/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript"
		src="/three/lib/jquery.validation/1.14.0/additional-methods.js"></script>
	<script type="text/javascript">
/*护理项目-排序*/
$('.table-sort').dataTable({
	"aaSorting": [[ 1, "desc" ]],//默认第几个排序
	"bStateSave": true,//状态保存
	"pading":false,
	"aoColumnDefs": [
	  //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
	  {"orderable":false,"aTargets":[1,8]}// 不参与排序的列
	]
});

/*护理项目-刷新模态框*/
$('#modal-demo').on('hidden.bs.modal', function () {
	window.location.reload();
});

/*护理项目-添加*/
function nurse_add(title,url,w,h){
	$("#modal-demo").modal("show");
	$("#span1").hide();
	$("#span3").hide();
}

/*护理项目-修改赋值*/
function nurse_edit(example){
	$("#modal-demo").modal("show");
	$("#form2").formEdit(example);
	$("#span").hide();
	$("#span1").show();
	$("#span2").hide();
	$("#span3").show();
	$("#coverPhoto").attr("src","http://localhost:8080/three"+example.coverPhoto);
	$("#coverBigPhoto").attr("src","http://localhost:8080/three"+example.coverBigPhoto);
	$("#xztp").on("click",function(){
		$("#span1").hide();
		$("#span").show();
	});
	$("#xztp1").on("click",function(){
		$("#span3").hide();
		$("#span2").show();
	});
	//console.log(example);
}

/*员工信息-添加++修改*/
$("#but").on("click",function(){
	//console.log($("#projectId").val());
		if($("#projectId").val()=='' || $("#projectId").val()==null){
			$("#form2").attr("action","/three/bnp/project_to_add");
			$("#form2").submit();
		}else{
			$("#form2").attr("action","/three/bnp/project_update");
			$("#form2").submit();
		}
});

/*护理项目-删除*/
function nurse_del(projectId){
	$.ajax({
		type : "POST",
		url : "/three/bnp/project_selectDel?projectId="+projectId,
		dataType : "json",
		success : function(obj) {
			if(obj=="ok"){
				layer.confirm('确认要删除吗？',function(index){
					$("#form1").attr("action","/three/bnp/project_del?projectId="+projectId);
					$("#form1").submit();
					layer.msg('已删除!',{icon:1,time:1000});
				});
			}else{
				alert("该项目有正在 在售/代售的礼包正在使用不可以删除！");
			}
		}
	});
}

/*护理项目-详情*/
function nurse_details(title,url,w,h){
	var index = layer.open({
		type: 2,
		title: title,
		content: url,
		h:h
	});
	layer.full(index);
}

/*图片上传失去焦点 验证图片后缀名是否正确*/
$("#file1").on("blur",function(){
	var file1=$("#file1").val();
	if(file1!=""){
		if(file1.endsWith(".jpg")||file1.endsWith(".png")){
			
		}else{
			alert("列表图片格式不正确！");
			$("#1file").val("");
			$("#file1").val("");
		}
	}
});
$("#file2").on("blur",function(){
	var file2=$("#file2").val();
	if(file2!=""){
		if(file2.endsWith(".jpg")||file2.endsWith(".png")){
			
		}else{
			alert("封面图片格式不正确！");
			$("#2file").val("");
			$("#file2").val("");
		}
	}
});

//表单验证
$("#form2").validate({
	rules:{
		projectName:{
			required:true,
		},
		status:{
			required:true,
		},
		typeId:{
			required:true,
		},   
		serverTime:{      
			digits:true,
			min:1,
		},
		beautyPrice:{
			digits:true,
			min:1,
		},
		rmbPrice:{
			isNumber:true,
			isFloatGteZero: true,
			isIntGteZero: true,
		},
		manualPrice:{
			isNumber:true,
			isFloatGteZero: true,
			isIntGteZero: true,
		},
		activePrice:{
			isNumber:true,
			isFloatGteZero: true,
			isIntGteZero: true,
		},
		sortNo:{
			digits:true,
		},
		messages: {
			rmbPrice: {
				isNumber:"请输入数字",
				isFloatGteZero: "请输入正数",
				isIntGteZero: "请输入正数",
            },
            manualPrice: {
            	isNumber:"请输入数字",
				isFloatGteZero: "请输入正数",
				isIntGteZero: "请输入正数",
			},
			activePrice: {
				isNumber:"请输入数字",
				isFloatGteZero: "请输入正数",
				isIntGteZero: "请输入正数",
			},
        },
	},
	onkeyup:false,
	focusCleanup:true,
});	
</script>
</body>
</html>